/**
 * @function
 * @name formSelectPanel
 * @description Form select tag will open specific panel according to the selection..
 * @memberof HQ.components
 *
 * @param {object} enhancementRoot - The current DOM element.
 */
HQ.components.formSelectPanel = function (enhancementRoot) {

    $(this.elems).each(function () {

        // GLOBAL VARS
        // ==============================================================
        var $inst            = $(this);
        var panelSelected    = $inst.data('panel-selected');

        // To scope the code, we will need to get the main parent container to find element
        // inside specific tag to prevent error on another enhancement.
        var parentsContainer = $inst.data('parents-container');
        var $mainParent      = $inst.parents(parentsContainer);
        var $allPanels       = $('.js-all-panels', $mainParent);
        var $noSelected      = $('.js-info-box-default', $mainParent);
        var $yesSelected     = $('.js-info-box-selected', $mainParent);

        // Mandatory elements
        if (typeof(parentsContainer) === "undefined") {
            console.error("The data attribute 'data-parents-container' doesn't exist!");
            return false;
        }
        if ($mainParent.length <= 0) {
            console.error("The $mainParent doesn't exist!");
            return false;
        }
        if ($allPanels.length <= 0) {
            console.error("The $allPanels doesn't exist!");
            return false;
        }

        // FUNCTIONS
        // ==============================================================

        /**
         * @function
         * @name _showCurrentPanel
         * @description Show the current panel.
         * @memberof HQ.components.tabs
         *
         * @param {string} p_panel The class panel.
         * @private
         */
        function _showCurrentPanel(p_panel) {
            $noSelected.hide();
            $yesSelected.hide();

            // Close all panels
            $allPanels.hide();

            if (p_panel !== "") {
                $yesSelected.show();

                // Show the current panel
                var $currentPanel = $('.' + p_panel);
                $currentPanel.show();

            } else {
                $noSelected.show();
            }
        }

        // EVENTS
        // ==============================================================

        $inst.on('change', function () {
            var $this  = $(this);
            var result = $this.val();
            _showCurrentPanel(result);
        });

        // In page load, selected the panel to show.
        if (typeof(panelSelected) !== "undefined" && panelSelected) {
            $inst.val(panelSelected).change();
        }

    });
};